<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="vue.js"></script>
  <script src="vue-router.js"></script>
  <style>
    .router-link-active{
      background: red;
    }
    .fade-enter{
      transform: translateX(-100%);
    }
    .fade-leave-to{
      transform: translateX(100%);
    }
    .fade-enter-active,.fade-leave-active{
      transition: all 1s;
    }
  </style>
</head>
<body>
  <div id="app">
    <button @click="enterHome">点击到首页</button>
    <button @click="enterNews">点击到新闻页</button>
    
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  
    <!-- 出口 -->
    <h3>我是底部</h3>
  </div>
  <script>
    let Home = {
      template:`
        <div>
          我是首页
         
        </div>
      `,
      created () {
       
        console.log(111);
      }
    };
    let News = {
      template:`
        <div>
          我是新闻页
          <button @click="back">返回上一页</button>
        </div>
      `,
      created () {
        console.log(2222);
      },
      mounted () {
        console.log(2222+"mounted");
      },
      activated(){
        console.log("我是keepalive组件包裹的组件，再一次激活的钩子函数");
        // 调用 需要 局部刷新数据的那个请求函数
        
      },

      methods:{
        back(){
          this.$router.go(-1);
        }
      }
    };
    // 定义一个路由规则
    let routes = [
      {
        path:"/",
        redirect: "/home"
      },
      {
        name:"home",
        path:"/home",
        component:Home,
        meta:{
          keepAlive:false
        }
      },
      {
        name:"news",
        path:"/news",
        component:News,
        meta:{
          keepAlive:true
        }
      }
    ];
    // 初始化 router对象
    const router = new VueRouter({
      routes
    });
    let vm = new Vue({
      el:"#app",
      router,
      methods:{
        enterHome(){
          this.$router.push({
            path:"/home",
           
          });
        },
        enterNews(){
          
          this.$router.push({
            path:"/news",
           
          });
        }
      }
    })
  </script>
</body>
</html>